<template>
  <div class="header" :style="{ backgroundImage: `url(${sellerInfo.avatar})` }">
    <!-- 遮罩层 -->
    <div class="mask"></div>

    <div class="info">
      <div class="pic">
        <img :src="sellerInfo.avatar" alt="商家logo" />
      </div>
      <div class="title">
        <p>{{ sellerInfo.name }}</p>
      </div>
      <!-- 中间蜂鸟必达 -->
      <div class="center">
        <p>{{ sellerInfo.description }}</p>
      </div>
      <!-- 头部底部 -->
      <div class="bottom">
        <!-- 获取索引下标为0 的相应数据 -->
        <p>在线支付满28减5,满50减10</p>
      </div>

      <!--底部右边部分 -->
      <div class="right">
        <p>5个 ></p>
      </div>
    </div>
    <div class="tips">
      <p>{{ sellerInfo.bulletin }}</p>
    </div>
    <span>></span>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {};
  },

  created() {
    this.getSeller();
    // console.log(this.sellerInfo);
  },
  computed: {
    ...mapState(["sellerInfo"]),
  },
  methods: {
    ...mapActions(["getSeller"]),
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 35.733vw;
  background-color: aqua;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;

  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(7, 17, 27, 0.5);
    backdrop-filter: blur(10px);
  }

  .info {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;

    .pic {
      padding: 6.4vw 0 0 6.4vw;

      img {
        width: 17.067vw;
        border-radius: 0.533vw;
      }
    }
  }

  // 标题
  .title {
    position: absolute;
    top: 6.4vw;
    left: 27.333vw;
    color: white;

    p {
      font-size: 4.267vw;
      font-weight: bold;
      line-height: 4.8vw;

      &::before {
        content: "品牌";
        // display: inline-block;
        background-color: red;
        padding: 0vw 1.333vw;
        margin-right: 1.6vw;
        font-weight: normal;
      }
    }
  }

  .center {
    position: absolute;
    top: 14.4vw;
    left: 27.333vw;
    color: white;
    font-size: 3.2vw;
    font-weight: 200;
    line-height: 3.2vw;

    p {
      &::after {
        content: "/ 38分钟送达";
        margin-left: 1.6vw;
      }
    }
  }

  .bottom {
    position: absolute;
    top: 20.333vw;
    left: 27.333vw;
    color: white;
    font-size: 2.667vw;
    font-weight: 200;
    line-height: 3.2vw;

    p {
      &::before {
        content: "减";
        color: #ee7675;
        display: inline-block;
        width: 3.867vw;
        height: 3.6vw;
        margin-right: 1.067vw;
        font-weight: bold;
        background-color: white;
        border-radius: 0.533vw;
      }
    }
  }

  .right {
    position: absolute;
    top: 18.333vw;
    right: 3.2vw;
    color: white;
    background: rgba(7, 17, 27, 0.2);
    font-weight: 200;
    line-height: 6.133vw;
    font-size: 2.667vw;
    display: inline-block;
    width: 12.667vw;
    height: 6.133vw;
    border-radius: 2.667vw;
    text-align: center;
  }

  .tips {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 2.667vw;
    color: #fff;
    padding-left: 3.2vw;
    background: rgba(7, 17, 27, 0.2);

    p {
      height: 7.467vw;
      line-height: 7.467vw;
      width: 85%;
      // 文本超出显示省略号
      text-overflow: ellipsis;
      // 不换行
      white-space: nowrap;
      overflow: hidden;

      &::before {
        content: "公告";
        font-size: 2.667vw;
        font-weight: bold;
        background-color: white;
        color: #333;
        margin: 1vw 1.067vw 0vw 3.2vw;
      }
    }
  }

  span {
    position: absolute;
    bottom: 1.667vw;
    right: 5.2vw;
    color: white;
  }
}
</style>
